<template>
  <div class="filter-container" v-if="modelValue">
    <el-form :model="formData" label-width="130px" label-position="right">
      <!-- 基础筛选区域 -->
      <div class="section">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名或缩写:">
              <el-input v-model="formData.name" placeholder="请输入姓名或缩写" />
            </el-form-item>
            <el-form-item label="疾病种类:">
              <el-select v-model="formData.diseaseType" placeholder="全部疾病">
                <el-option label="全部疾病" value="" />
                <!-- 其他疾病选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="录入员:">
              <el-select v-model="formData.name" placeholder="全部录入员">
                <el-option label="全部录入员" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态:">
              <el-select v-model="formData.name" placeholder="全部">
                <el-option label="全部" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="评价:">
              <el-select v-model="formData.name" placeholder="全部">
                <el-option label="全部" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="籍贯地址:">
              <el-input v-model="formData.name" placeholder="请输入籍贯地址" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="病例号">
              <el-input v-model="formData.caseNumber" />
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="formData.birthDate"
                type="daterange"
                start-placeholder="最小生日"
                end-placeholder="最大生日"
              />
            </el-form-item>
            <el-form-item label="入组时间:">
              <el-date-picker
                v-model="formData.enrollmentDate"
                type="daterange"
                start-placeholder="最早时间"
                end-placeholder="最晚时间"
              />
            </el-form-item>
            <el-form-item label="进度区间起(%):">
              <el-input v-model="formData.progressMin" placeholder="输入进度区间起(%)" />
            </el-form-item>
            <el-form-item label="访视超窗状态:">
              <el-select v-model="formData.name" placeholder="全部">
                <el-option label="全部" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注信息:">
              <el-input v-model="formData.name" placeholder="请输入籍贯地址" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="formData.gender" placeholder="全部">
                <el-option label="全部" value="" />
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
            <el-form-item label="分组:">
              <el-select v-model="formData.name" placeholder="请选择分组">
                <el-option label="研究组" value="research" />
                <el-option label="对照组" value="control" />
                <el-option label="测试组" value="test" />
                <el-option label="其他组" value="other" />
              </el-select>
            </el-form-item>
            <el-form-item label="住院号:">
              <el-input v-model="formData.caseNumber" placeholder="请输入住院号" />
            </el-form-item>
            <el-form-item label="进度区间止(%):">
              <el-input v-model="formData.caseNumber" placeholder="请输入进度区间止(%)" />
            </el-form-item>
            <el-form-item label="随访超窗时间:">
              <el-select v-model="formData.name" placeholder="全部">
                <el-option label="全部" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="病史和描述:">
              <el-input v-model="formData.caseNumber" placeholder="请输入病史和描述" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号:">
              <el-input v-model="formData.name" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="基准时间">
              <el-date-picker
                v-model="formData.birthDate"
                type="daterange"
                start-placeholder="开始基准时间"
                end-placeholder="结束基准时间"
              />
            </el-form-item>

            <el-form-item label="受试者标识:">
              <el-input v-model="formData.caseNumber" placeholder="请输入受试者标识" />
            </el-form-item>
            <el-form-item label="进度所处阶段名称:">
              <el-input v-model="formData.caseNumber" placeholder="请输入进度所处阶段名称" />
            </el-form-item>
            <el-form-item label="所属机构:">
              <el-select v-model="formData.name" placeholder="全部">
                <el-option label="全部" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="按照数据修改时间排序:" label-width="160px">
              <el-checkbox v-model="checked5" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="title">
            <el-button type="primary" @click="advancedFilter = !advancedFilter" plain>{{!advancedFilter ? '开启筛选' : '关闭筛选'}}</el-button>
            <span>点击开启筛选可根据所填量表数据作为筛选条件 </span>
          </div>
        </el-row>
      </div>
      <!-- 高级筛选区域 -->
      <div class="advanced-filter" v-if="advancedFilter">
        <!-- 标题 -->
        <h3 class="filter-title">高级筛选</h3>

        <!-- 主表单区域 -->
        <el-form :model="formData" label-width="100px">
          <!-- 切换分组 -->

          <el-row class="section">
            <el-col :span="6">
              <el-form-item label="切换分组：">
                <el-select>
                  <el-option label="研究组" value="research" />
                  <el-option label="对照组" value="control" />
                  <el-option label="测试组" value="test" />
                  <el-option label="其他组" value="other" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选择范围：">
                <el-select v-model="formData.scope" placeholder="请选择">
                  <el-option label="交集" value="intersection" />
                  <el-option label="并集" value="union" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 动态条件区域 -->
          <div class="conditions">
            <div v-for="(condition, index) in conditions" :key="index" class="condition-item">
              <el-form-item label="选择条件：">
                <div class="condition-row">
                  <!-- 时期选择 -->
                  <el-select v-model="condition.period" placeholder="基线期">
                    <el-option label="基线期" value="baseline" />
                    <el-option label="随访期" value="follow-up" />
                  </el-select>
                  <!-- CRF表 -->
                  <el-select v-model="condition.crf" placeholder="CRF表">
                    <el-option label="基本信息" value="basic" />
                    <el-option label="随访信息" value="follow-up" />
                  </el-select>
                  <!-- 题目选择 -->
                  <el-select v-model="condition.question" placeholder="点击选择题目">
                    <!-- 题目选项 -->
                  </el-select>
                  <!-- 运算符 -->
                  <el-select v-model="condition.operator">
                    <el-option label="等于" value="=" />
                    <el-option label="包含" value="like" />
                  </el-select>
                  <!-- 输入框 -->
                  <el-input v-model="condition.value" placeholder="请输入" />
                  <el-button
                    type="primary"
                    @click="addCondition"
                    icon="el-icon-plus"
                    v-if="index == 0"
                  >
                    添加条件
                  </el-button>
                  <el-button
                    type="danger"
                    @click="removeCondition(index)"
                    class="delete-btn"
                    v-if="index !== 0"
                    :icon="Delete"
                  >
                    删除条件
                  </el-button>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="success">群发</el-button>
        <el-button type="warning">扫一扫</el-button>
        <el-button type="warning">预约随访</el-button>
        <el-button type="success">纳排数据</el-button>
        <el-button type="success">入组数据</el-button>
        <el-button type="success">其他定制数据</el-button>
        <el-button type="info" @click="$emit('update:modelValue', false)">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const advancedFilter = ref(false);
const formData = reactive({
  name: '',
  caseNumber: '',
  gender: '',
  birthDate: [],
  diseaseType: '',
  enrollmentDate: [],
  progressMin: null,
  progressMax: null,
  institution: '',
  status: '',
  group: '研究组',
  scope: 'intersection',
  crfTable: '基本信息',
});
const handleQuery = () => {
  console.log('查询条件:', formData);
};
const handleReset = () => {
  Object.keys(formData).forEach(key => {
    if (Array.isArray(formData[key])) {
      formData[key] = [];
    } else {
      formData[key] = '';
    }
  });
};
// 动态条件
const conditions = reactive([
  {
    period: 'baseline',
    crf: 'basic',
    question: '',
    operator: '=',
    value: '',
  },
]);

// 添加条件
const addCondition = () => {
  conditions.push({
    period: 'baseline',
    crf: 'basic',
    question: '',
    operator: '=',
    value: '',
  });
};

// 删除条件
const removeCondition = index => {
  conditions.splice(index, 1);
};
</script>
<style scoped lang="scss">
.filter-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.section {
  //   margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  .el-row {
    .title {
      margin-left: 50px;
      span {
        margin-left: 20px;
      }
    }
  }
}

.separator {
  margin: 0 8px;
  color: #909399;
}

.condition-add {
  margin-top: 12px;
  border-top: 1px dashed #ebeef5;
  padding-top: 12px;
}

.action-buttons {
  margin-top: 24px;
  text-align: right;
}

.el-form-item {
  margin-bottom: 18px;
}

:deep(.el-collapse-item__header) {
  font-weight: normal;
  color: #606266;
}

.advanced-filter {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  .filter-title {
    color: #303133;
  }

  .section {
    padding: 15px;
    background: white;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    .el-col {
      margin-bottom: 0;
    }
    .el-form-item {
      margin-bottom: 0;
    }
  }

  .condition-item {
    padding: 16px;
    background: white;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    .el-form-item {
      margin-bottom: 0;
    }
  }

  .condition-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 80%;
  }

  .condition-row .delete-btn {
    margin-left: auto;
    width: auto;
  }

  .add-condition {
    margin-top: 20px;
    text-align: center;
  }

  .el-select {
    width: 100%;
  }
}
</style>
